<template>
  <div id="app">
    <transition :name="transition">
      <router-view class="view" />
    </transition>
    <div id="Contact_Push_Panel" class="ts_Contact_Push_Panel">
      <a href="/#/Chat?friend_id=10008">
        <img src />
        <div class="ts_Contact_Push_Panel-main">
          <span class="ts_Contact_Push_Panel-title"></span>
          <span class="ts_Contact_Push_Panel-content"></span>
        </div>
        <div class="ts_Contact_Push_Panel-time">
          <span></span>
        </div>
      </a>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import { initLogin, layout } from "./assets/js/intercept";
import { WebSocketServer } from "./assets/js/websocket";
export default {
  data() {
    return {
      transition: "slide-left"
    };
  },
  watch: {
    $route(to, from) {
      var back = this.$router.back;
      if (back) {
        //点击了返回
        this.transition = "slide-right";
      } else {
        this.transition = "slide-left";
      }
      this.$router.back = false;
    }
  },
  methods: {
    toLayout: function() {
      layout();
    }
  },
  mounted() {
    if (window.history && window.history.pushState) {
      history.pushState(null, null, document.URL);
      window.addEventListener("popstate", this.fun, false); //false阻止默认事件
    }
  },
  destroyed() {
    window.removeEventListener("popstate", this.fun, false); //false阻止默认事件
  },
  created: function() {
    initLogin();
    WebSocketServer.onStart();
  }
};
</script>
<style>
@import "assets/css/main.css";
@import "assets/mui/css/mui.min.css";
.view {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  transition: all 0.3s linear;
}
.slide-left-enter,
.slide-right-leave-active {
  opacity: 0;
  transform: translate(100%, 0);
}

.slide-left-leave-active,
.slide-right-enter {
  opacity: 0;
  transform: translate(-100%, 0);
}
</style>
